<!DOCTYPE html>


<!--
#######################################
	- THE HEAD PART -
######################################
-->
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width,initial-scale=1">

	<title>SLIDER REVOLUTION -  The Responsive Slider Plugin - Start Here</title>

    <!-- get jQuery from the google apis -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>

    <!-- CSS STYLE-->
    <link rel="stylesheet" type="text/css" href="examples&source/css/style.css" media="screen" />

    <!-- THE PREVIEW STYLE SHEETS, NO NEED TO LOAD IN YOUR DOM -->
    <link rel="stylesheet" type="text/css" href="examples&source/css/noneed.css" media="screen" />

	<!-- GOOGLE FONTS -->
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>

</head>



<!--
#######################################
	- THE BODY PART -
######################################
-->
<body>

	
	<!-- HEADER -->
	<header>
		<section class="container">
			<article class="logo-container"><a href="http://themes.themepunch.com/?theme=revolution_jq"><div class="logo"></div></a></article>
			<div style="clear:both"></div>
		</section>
	</header> <!-- END OF HEADER -->

	<article class="container">
		
		<h2>Welcome and thank you for purchasing Slider Revolution !</h2>
		<p>If you are new here, we would recommend you to go through our demo setups in the <strong>Examples Folder</strong> (i.e. <a href="examples&source/home-boxed.html" target="_blank" class="button"><strong> Home Slider Boxed </strong></a>) first, <br/>and then check our special examples in the <strong>Guides & More</strong> folder (i.e.<a href="guides&more/s01.Boxed.html" target="_blank" class="button"><strong> How to build a Boxed Slider</strong>)</a>.</p>
		<div style="width:100%;height:50px"></div>
		<h2>Where is the Documentation ?</h2>
		<p>You already went through our examples and guides, and still have questions? Take a look at the <a href="documentation/documentation.html" target="_blank" class="button"><strong>Documentation</strong></a>
		<div style="width:100%;height:50px"></div>
		
		<h2>I would like a simple quick start. What do i need to do ?</h2>
		<h3><div class="step">1</div> Copy the slider files into your <span style="text-decoration: underline;">Project Folder</span></h3>
		<p>Copy the <em>rs-plugin</em> folder into the same directory where you find your html document.</p>
		<p>Copy the <em>style.css</em> file into your css folder, or copy the content of the <em>style.css</em> file it into your style sheet</p>
	  <div style="width:100%; height:40px"></div>
		<h3><div class="step">2</div> This goes into your site's <span style="text-decoration: underline;">Header Section</span>:</h3>
		<pre>
		<span style="color:#27ae60">&lt;!-- get jQuery from the google apis --&gt;</span>
		&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"&gt;&lt;/script&gt;

		<span style="color:#27ae60">&lt;!-- CSS STYLE--&gt;</span>
		&lt;link rel="stylesheet" type="text/css" href="css/style.css" media="screen" /&gt;

		<span style="color:#27ae60">&lt;!-- SLIDER REVOLUTION 4.x SCRIPTS  --&gt;</span>
		&lt;script type="text/javascript" src="rs-plugin/js/jquery.themepunch.tools.min.js"&gt;&lt;/script&gt;
		&lt;script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"&gt;&lt;/script&gt;

		<span style="color:#27ae60">&lt;!-- SLIDER REVOLUTION 4.x CSS SETTINGS --&gt;</span>
		&lt;link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" /&gt;
		</pre>
	  <div style="width:100%; height:40px"></div>
	  <h3><div class="step">3</div> Add the slider markup to your <span style="text-decoration: underline;">HTML Document</span>:</h3>
	  <pre>
	<span style="color:#27ae60">&lt;!--
	#################################
		- THEMEPUNCH BANNER -
	#################################
	--&gt;</span>
	&lt;div class="tp-banner-container"&gt;
		&lt;div class="tp-banner" &gt;
			&lt;ul&gt;
				<span style="color:#27ae60">&lt;!-- SLIDE  --&gt;</span>
				&lt;li data-transition="fade" data-slotamount="7" data-masterspeed="1500" &gt;
					<span style="color:#27ae60">&lt;!-- MAIN IMAGE --&gt;</span>
					&lt;img src="../examples&source/images/slidebg1.jpg"  alt="slidebg1"  data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat"&gt;
					<span style="color:#27ae60">&lt;!-- LAYERS --&gt;</span>
					<span style="color:#27ae60">&lt;!-- LAYER NR. 1 --&gt;</span>
					&lt;div class="tp-caption lightgrey_divider skewfromrightshort fadeout"
						data-x="85"
						data-y="224"
						data-speed="500"
						data-start="1200"
						data-easing="Power4.easeOut"&gt;My Caption
					&lt;/div&gt;
					...

				&lt;/li&gt;
				<span style="color:#27ae60">&lt;!-- SLIDE  --&gt;</span>
				&lt;li data-transition="zoomout" data-slotamount="7" data-masterspeed="1000" &gt;
					<span style="color:#27ae60">&lt;!-- MAIN IMAGE --&gt;</span>
					&lt;img src="../examples&source/images/darkblurbg.jpg"  alt="darkblurbg"  data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat"&gt;
					<span style="color:#27ae60">&lt;!-- LAYERS --&gt;</span>
					<span style="color:#27ae60">&lt;!-- LAYER NR. 1 --&gt;</span>
					&lt;div class="tp-caption lightgrey_divider skewfromrightshort fadeout"
						data-x="85"
						data-y="224"
						data-speed="500"
						data-start="1200"
						data-easing="Power4.easeOut"&gt;My Caption
					&lt;/div&gt;
					...
				&lt;/li&gt;
				....
			&lt;/ul&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	  </pre>

	   <div style="width:100%; height:40px"></div>
	  <h3><div class="step">4</div> Initialise the plugin somewhere in the <span style="text-decoration: underline;">Footer Section</span>:</h3>
	  <pre>
	  	&lt;script type="text/javascript"&gt;
				jQuery(document).ready(function() {
					   jQuery('.tp-banner').revolution(
						{
							delay:9000,
							startwidth:1170,
							startheight:500,
							hideThumbs:10
						});
				});
			&lt;/script&gt;
	  </pre>
	  
	  <div style="width:100%;height:50px"></div>
	  <h2>I need more help, where should i go?</h2>
	  <p>Please feel free to visit us at <a href="http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848" target="_blank" class="button"><strong>CODECANYON</strong></a>, check out again our <a href="http://themes.themepunch.com/?theme=revolution_jq" target="_blank" class="button"><strong>ONLINE PREVIEWS</strong></a> or follow us below.</p>
	  <br/><br/><img src="http://themepunch.com/gfx/fb_16.png">&nbsp;&nbsp;<a href="https://www.facebook.com/themepunchofficial">Facebook</a> &nbsp; &nbsp;<img src="http://themepunch.com/gfx/tw_16.png">&nbsp;&nbsp;<a href="https://twitter.com/themepunch">Twitter</a> &nbsp; &nbsp;<img src="http://themepunch.com/gfx/sup_16.png">&nbsp;&nbsp;<a href="http://themepunch.ticksy.com">Support</a>
	</article>
</body>




